<template>
  <div>
    <el-row style="padding: 20px 0;margin-top: 20px" :gutter="20">
      <el-col :span="8">
        <div>
          <div class="left" v-for="(item, index) in allQuesList" :key="index">
            <div style="font-size: 14px;color:#666" v-if="item.quesType === 1">单选题</div>
            <div style="font-size: 14px;color:#666" v-else-if="item.quesType === 2">多选题</div>
            <div style="font-size: 14px;color:#666" v-else>判断题</div>
            <div style="font-size: 14px;color:#666">共{{item.simpleNum * 1 + item.normalNum * 1 + item.hardNum *
              1}}题,共{{item.score * item.simpleNum + item.score * item.normalNum + item.score * item.hardNum}}分
            </div>
            <div style="font-size: 14px;color:#666">每题分数
              <el-input @blur="handlerQuesItemScoreChange(item.score,item,index)" :min="0" v-model="item.score"
                        type="number" style="width: 80px;margin-left: 5px;margin-right: 5px" ></el-input>
              分
            </div>
            <div><el-button type="text" @click="handlerRemoveQues(index)">删除</el-button></div>

          </div>

          <div class="left">
            <div>总题数:{{quesTotal}}题</div>
            <div>当前分数:{{quesAllScore}}分</div>
          </div>
        </div>

      </el-col>

      <el-col :span="16">
        <div style="text-align: center;line-height: 50px">{{paperName}}</div>
        <div style="text-align: center;line-height: 50px">{{paperName}}</div>
        <el-input style="background:no-repeat 0 0 scroll #EEEEEE;border:none;outline:medium;" v-model="paperName"></el-input>
        <div style="border-bottom: 1px solid #DEDEDE;padding-bottom: 10px;margin: 0;color: #333333;"></div>
        <div style="margin: 20px">
          <div v-for="(item, index) in allQuesList" style="margin-top: 20px" :key="index">
            <div style="display: flex;">
              <div style="font-size: 14px;color: #666;">{{item.title}}</div>
              <div class="el-icon-delete" style="margin-left: 10px" @click="handlerRemoveQues(index)"></div>
            </div>
            <el-button type="primary" plain @click="addQues(index)"
                       style="margin-top: 20px;margin-bottom: 20px">添加试题
            </el-button>
            <!--单选-->
            <div v-if="item.quesType === 1">
              简单：{{item.simpleNum}}；普通：{{item.normalNum}}；困难：{{item.hardNum}}
            </div>
            <!--多选-->
            <div v-if="item.quesType === 2">
              简单：{{item.simpleNum}}；普通：{{item.normalNum}}；困难：{{item.hardNum}}
            </div>
            <!--判断-->
            <div v-if="item.quesType === 3">
              简单：{{item.simpleNum}}；普通：{{item.normalNum}}；困难：{{item.hardNum}}
            </div>
          </div>
        </div>

        <div style="border-bottom: 1px solid #DEDEDE;padding-bottom: 10px;margin: 0;color: #333333;"></div>
        <div>
          <el-dropdown @command="handleCommand" style="margin-top: 20px">
            <el-button type="primary">
              创建新的大题<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">单选题</el-dropdown-item>
              <el-dropdown-item command="2">多选题</el-dropdown-item>
              <el-dropdown-item command="3">判断题</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" @click="handlerSavePaper" :loading="loading">保存</el-button>
        </div>
      </el-col>

    </el-row>

    <el-dialog title="选择试题" :visible.sync="dialogVisible" :before-close="handlerCloseDialog" width="400px">
      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="试题分类" prop="name">
          <el-select v-model="dataForm.cateId" placeholder="试题分类" @change="handlerCateChange">
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选题方式" prop="level">
          <div>简单
            <el-input type="number" :min="0" :max="simpleNum" style="width: 100px;margin-left: 5px;margin-right: 5px" v-model="dataForm.selectSimpleNum"></el-input>
            /{{simpleNum}}
          </div>
          <div>普通
            <el-input type="number" :min="0" :max="normalNum"
                      style="width: 100px;margin-left: 5px;margin-right: 5px;margin-top: 10px" v-model="dataForm.selectNormalNum"></el-input>
            /{{normalNum}}
          </div>
          <div>困难
            <el-input type="number" :min="0" :max="hardNum"
                      style="width: 100px;margin-left: 5px;margin-right: 5px;margin-top: 10px" v-model="dataForm.selectHardNum"></el-input>
            /{{hardNum}}
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin-top: 50px">
        <el-button @click="handlerCloseDialog">关闭</el-button>
        <el-button type="success" @click="handlerSaveQues">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        allQuesList: [],
        currentQuesType: 0,
        currentQues: {},
        quesTotal: 0,
        quesAllScore: 0,
        quesSelectType: 0,
        loading: false,
        dialogVisible: false,
        paperName: this.$route.query.name,
        compType: this.$route.query.compType,
        paperCateId: this.$route.query.cateId,
        simpleNum: 0,
        normalNum: 0,
        hardNum: 0,
        paperId: this.$route.query.paperId,
        cateList: [],
        dataForm: {
          cateId: '',
          selectSimpleNum: 0,
          selectNormalNum: 0,
          selectHardNum: 0
        }
      }
    },
    mounted () {
      if (this.paperId) {
        this.getPaperDetail(this.paperId)
      }
    },
    methods: {
      getPaperDetail (paperId) {
        this.$http({
          url: this.$http.adornUrl(`/exam-admin/paper/info/${this.paperId}`),
          method: 'post'
        }).then(res => {
          this.allQuesList = JSON.parse(res.data.paperInfo)
          this.paperName = res.data.paperName
          this.compType = res.data.compType
          this.paperCateId = res.data.cateId
          this.calQuesNumAndScore()
        })
      },
      getQuesCateList () {
        this.$http({
          url: this.$http.adornUrl(`/exam-admin/ques/cate/select`),
          method: 'get'
        }).then(data => {
          this.cateList = data.data
        })
      },
      addQues (index) {
        this.getQuesCateList()
        this.dialogVisible = true
        this.currentQuesType = this.allQuesList[index].quesType
        this.currentQues = this.allQuesList[index]
      },
      handleCommand (val) {
        this.quesSelectType = parseInt(val)
        for (let i = 0; i < this.allQuesList.length; i++) {
          if (this.allQuesList[i].quesType === val) {
            this.$message.warning('已经添加过该类型题库')
            return
          }
        }
        switch (this.quesSelectType) {
          case 1:
            this.allQuesList.push({
              quesType: 1,
              title: '单选题',
              simpleNum: 0,
              normalNum: 0,
              hardNum: 0,
              score: 0
            })
            break
          case 2:
            this.allQuesList.push({
              quesType: 2,
              title: '多选题',
              simpleNum: 0,
              normalNum: 0,
              hardNum: 0,
              score: 0
            })
            break
          case 3:
            this.allQuesList.push({
              quesType: 3,
              title: '判断题',
              simpleNum: 0,
              normalNum: 0,
              hardNum: 0,
              score: 0
            })
            break
        }
      },
      handlerSaveQues () {
        this.currentQues.simpleNum = this.dataForm.selectSimpleNum
        this.currentQues.normalNum = this.dataForm.selectNormalNum
        this.currentQues.hardNum = this.dataForm.selectHardNum
        this.currentQues.cateId = this.dataForm.cateId
        if (this.currentQues.simpleNum > this.simpleNum ||
          this.currentQues.normalNum > this.normalNum ||
          this.currentQues.hardNum > this.hardNum) {
          this.$message.warning('当前输入数量大于题库数量，请重新输入 ')
          return
        }
        for (let i = 0; i < this.allQuesList.length; i++) {
          if (this.allQuesList[i].simpleNum <= 0 && this.allQuesList[i].normalNum <= 0 && this.allQuesList[i].hardNum <= 0) {
            this.$message.warning('数量不能全为0')
            return
          }
        }
        // console.log(this.allQuesList)
        this.handlerCloseDialog()
        this.calQuesNumAndScore()
      },
      // 保存试卷
      handlerSavePaper () {
        this.loading = true
        if (this.allQuesList === '' || this.allQuesList.length <= 0) {
          this.$message.warning('请添加试题')
          return
        }
        for (let i = 0; i < this.allQuesList.length; i++) {
          if (this.allQuesList[i].score <= 0) {
            this.$message.warning('请设置每题分数')
            return
          }
        }
        for (let i = 0; i < this.allQuesList.length; i++) {
          if (this.allQuesList[i].simpleNum <= 0 && this.allQuesList[i].normalNum <= 0 && this.allQuesList[i].hardNum <= 0) {
            this.$message.warning('数量不能全为0')
            return
          }
        }

        this.calQuesNumAndScore()
        this.$http({
          url: this.$http.adornUrl(`/exam-admin/paper/${!this.paperId ? 'save' : 'update'}`),
          method: 'post',
          data: {
            'id': this.paperId,
            'paperName': this.paperName,
            'cateId': this.paperCateId,
            'totalper': this.quesAllScore,
            'compType': this.compType,
            'paperInfo': JSON.stringify(this.allQuesList)
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.$message.success('操作成功')
            this.$router.push({
              name: 'paper-paper'
            })
            this.loading = false
          } else {
            this.$message.warning(data.msg)
            this.loading = false
          }
        })
      },
      handlerCloseDialog () {
        this.dialogVisible = false
        this.cateList = []
        this.dataForm.selectSimpleNum = 0
        this.dataForm.selectNormalNum = 0
        this.dataForm.selectHardNum = 0
        this.dataForm.cateId = ''
        this.simpleNum = 0
        this.normalNum = 0
        this.hardNum = 0
      },
      handlerQuesItemScoreChange (value, item, index) {
        this.calQuesNumAndScore()
        // if (value) {
        //   this.calQuesNumAndScore()
        // }
      },
      handlerCateChange (id) {
        switch (this.currentQuesType) {
          case 1:
            // 单选
            this.$http({
              url: this.$http.adornUrl('/exam-admin/ques/singer/getQuesCount'),
              method: 'post',
              data: {
                cateId: id
              }
            }).then(res => {
              this.simpleNum = res.data.simpleNum
              this.normalNum = res.data.normalNum
              this.hardNum = res.data.hardNum
            })
            break
          case 2:
            // 多选
            this.$http({
              url: this.$http.adornUrl('/exam-admin/ques/multi/getQuesCount'),
              method: 'post',
              data: {
                cateId: id
              }
            }).then(res => {
              this.simpleNum = res.data.simpleNum
              this.normalNum = res.data.normalNum
              this.hardNum = res.data.hardNum
            })
            break
          case 3:
            // 判断
            this.$http({
              url: this.$http.adornUrl('/exam-admin/ques/judge/getQuesCount'),
              method: 'post',
              data: {
                cateId: id
              }
            }).then(res => {
              this.simpleNum = res.data.simpleNum
              this.normalNum = res.data.normalNum
              this.hardNum = res.data.hardNum
            })
            break
        }
      },
      // 计算总题数与总分数
      calQuesNumAndScore () {
        let quesTotal = 0
        let quesAllScore = 0
        this.quesAllScore = 0
        this.quesTotal = 0
        for (let i = 0; i < this.allQuesList.length; i++) {
          let num = this.allQuesList[i].simpleNum * 1 + this.allQuesList[i].normalNum * 1 + this.allQuesList[i].hardNum * 1
          quesTotal += num
          let score = this.allQuesList[i].simpleNum * this.allQuesList[i].score + this.allQuesList[i].normalNum * this.allQuesList[i].score + this.allQuesList[i].hardNum * this.allQuesList[i].score
          quesAllScore += score
        }
        this.quesTotal = quesTotal
        this.quesAllScore = quesAllScore
      },
      handlerRemoveQues (index) {
        this.allQuesList.splice(index, 1)
        this.calQuesNumAndScore()
      }
    }
  }
</script>

<style scoped>
  .left {
    margin-top: 30px;
    width: 100%;
    border: 1px solid #DEDEDE;
    border-radius: 4px;
    padding: 20px 15px 20px 15px;
    font-size: 14px;
    color: #666;
  }

  .left div {
    line-height: 30px;
  }
</style>
